import { formatImgItem, useUrlParams } from '@/utils';
import { Col, Flex, Tabs, Typography } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import { getLocale, Helmet, useIntl, useLocation, useModel } from 'umi';
import Apply from './components/Apply';
import Data from './components/Data';
import Msg from './components/Msg';
import Setting from './components/Setting';
import './index.less';

import banner from '@/assets/baner4.png';
import woman from '@/assets/p_woman1.png';
import Layout from '@/components/Layouts';
import { handleEvent } from '@/services/center';
import CountUp from 'react-countup';

const PersonCenter: React.FC = () => {
  const { user, run } = useModel('userModel');

  const isEn = getLocale() == 'en-US';
  const { setUploadParams } = useModel('uploadModel');
  const newIndex = useUrlParams('index');
  const { search } = useLocation();
  useEffect(() => {
    if (Object.keys(user || {})?.length > 0) {
      const {
        addressProof,
        bankMonthlyStatement,
        workProof,
        vehicleProof,
        estateProof,
        stockProof,
        cryptocurrencyProof,
        insuranceProof,
        otherProof,
        creditProof,
        idCardImg,
        idCardImg1,
        statementsConfirmFlag,
      } = user || {};
      // 设置全局上传的数据
      setUploadParams({
        idCard: {
          front: idCardImg,
          back: idCardImg1,
        },
        statementsConfirmFlag,
        bankMonthlyStatement: formatImgItem(bankMonthlyStatement),
        workProof: formatImgItem(workProof),
        vehicleProof: formatImgItem(vehicleProof),
        estateProof: formatImgItem(estateProof),
        stockProof: formatImgItem(stockProof),
        cryptocurrencyProof: formatImgItem(cryptocurrencyProof),
        otherProof: formatImgItem(otherProof),
        creditProof: formatImgItem(creditProof),
        addressProof: formatImgItem(addressProof),
        insuranceProof: insuranceProof
          ? JSON.parse(decodeURIComponent(encodeURIComponent(insuranceProof))).map((item: any) => {
              const { urls, ...rest } = item;
              return {
                ...rest,
                urls: formatImgItem(urls),
              };
            })
          : [],
      });
    }
  }, [user, setUploadParams]);

  const intl = useIntl();

  const { lastNameEn, firstNameEn, xScoreAmount, lastNameCn, firstNameCn, email, mobile } =
    user || {};
  const list = useMemo(
    () => [
      {
        label: intl.formatMessage({ id: 'center.apply' }),
        key: 'apply',
        children: <Apply />,
      },
      {
        label: intl.formatMessage({ id: 'center.data' }),
        key: 'data',
        children: <Data />,
        inTag: 'Personal_Center_access',
        improveTag: 'Personal_Center_XSCORE_improve',
      },

      {
        label: intl.formatMessage({ id: 'center.msg' }),
        key: 'msg',
        children: <Msg />,
      },
      {
        label: intl.formatMessage({ id: 'center.setting' }),
        key: 'setting',
        children: <Setting />,
      },
    ],
    [intl],
  );
  const [index, setIndex] = useState('apply');

  useEffect(() => {
    if (newIndex != '') {
      setIndex(list[Number(newIndex)]?.key);
    }
  }, [newIndex, search, list]);
  const obj = list.find((item) => item?.key == index);
  const { inTag } = obj || {};
  useEffect(() => {
    if (inTag) {
      handleEvent(inTag);
    }
  }, [inTag]);
  const cnName = `${firstNameCn}${lastNameCn}`;
  const enName = `${firstNameEn} ${lastNameEn}`;
  const name = isEn ? enName : cnName;

  const newName = (firstNameCn && name) || email || mobile;

  return (
    <>
      <Helmet>
        <title>
          {intl.formatMessage({
            id: index == 'data' ? 'home.write_meta_title' : 'home.meta_title',
          })}
        </title>
      </Helmet>
      <Col className="center">
        <Layout style={{ overflow: 'hidden' }} bgImg={banner} fixed>
          <Col className="center_top">
            <Flex
              align="center"
              justify="space-between"
              className="center_warrper"
              gap={20}
              style={{ padding: '25px 0 90px 0', overflow: 'hidden', whiteSpace: 'wrap' }}
            >
              <div className="center_top_left">
                <Typography.Text
                  className="center_top_left_title"
                  style={{ margin: '0 0 15px 0', color: '#fff' }}
                  ellipsis={{
                    tooltip: <div>{newName}</div>,
                  }}
                >
                  {intl.formatMessage({ id: 'center.welcome' })} {newName}
                </Typography.Text>

                <div className="center_top_left_des">
                  {intl.formatMessage({ id: 'center.price' })}
                </div>
              </div>
              <div style={{ display: 'flex', position: 'relative' }}>
                <div
                  className="tabsContent_right"
                  style={{
                    marginRight: 209,
                    width: isEn ? 270 : 'auto',
                    minWidth: isEn ? 270 : 'auto',
                    padding: isEn ? '18px 21px 18px 6px' : '18px 21px 18px 18px',
                  }}
                >
                  <div className="tabsContent_right_bg personal_bg" />
                  <div className="tabsContent_right_left">
                    <Col style={{ color: '#fff', fontSize: 16 }}>
                      {intl.formatMessage({ id: 'home.ai' })}
                      {isEn ? <div> {intl.formatMessage({ id: 'home.ai1' })}</div> : null}
                    </Col>
                    <Col
                      style={{
                        fontSize: 30,
                        color: '#fff',
                        fontWeight: 700,
                        marginTop: 6,
                      }}
                    >
                      <span style={{ marginRight: 4, fontSize: 26 }}>$</span>
                      {xScoreAmount ? <CountUp separator="," end={xScoreAmount} /> : '- - -'}
                    </Col>
                    {/* <Col style={{ color: '#fff' }}>
                    {intl.formatMessage({ id: 'center.low' }, { num: 2 })}
                  </Col> */}
                  </div>
                </div>

                <img
                  src={woman}
                  style={{ position: 'absolute', zIndex: 1, right: 0, top: isEn ? 5 : -14 }}
                  height={199}
                />

                <div className="tabsContent_right_woman_bg" />
              </div>
            </Flex>
            <div
              style={{
                width: 240,
                height: 240,
                transform: 'rotate(-30deg)',
                background: '#0065fd',
                borderRadius: 12,
                position: 'absolute',
                right: -25,
                top: 89,
              }}
            />
          </Col>
        </Layout>
        <div className="common">
          <div className="center_top_left_tabs">
            <Tabs
              activeKey={index}
              onChange={(key) => {
                if (['data'].includes(key)) {
                  run();
                }
                setIndex(key);
              }}
              className="center_top_left_tabs_style"
              items={list}
              type="card"
            />
          </div>
        </div>
        <Col className="center_bottom" />
      </Col>
    </>
  );
};

export default PersonCenter;
